<template>
  <div>
    <van-nav-bar
      title="人工上报市容顽症事件"
      left-text=""

      :fixed="true"

    />
    <div class="title">事件详情单</div>
    <div class="desc">
      <i></i>
      <span>{{ state }}</span>
    </div>
    <van-cell-group>
      <van-cell title="事件类型" :value="lists.eventType" />
    </van-cell-group>

    <van-cell-group>
      <van-cell title="发生时间" :value="lists.createTime" />
    </van-cell-group>
    <van-cell-group>
      <van-cell title="发现方式" :value="lists.region" />
    </van-cell-group>

    <van-cell-group>
      <van-cell title="事件地址" :value="lists.channelAlias" />
    </van-cell-group>

    <van-cell-group>
      <van-cell title="所属网格" :value="lists.ownerGrid" />
    </van-cell-group>

    <van-cell-group>
      <van-cell title="AI照片" icon="photo-o" />
      <div
        class="vimg"
        v-for="(item, index) in lists.imageUrl"
        :key="index"
        @click="vimghandle(item)"
      >
        <van-image width="100" height="100" :src="item" />
      </div>
    </van-cell-group>

    <van-cell-group>
      <van-cell title="现场照片" icon="photo-o" />
      <div
        class="vimg"
        v-for="(item, index) in lists.sceneImageUrls"
        :key="index"
        @click="vimghandle(item)"
      >
        <van-image width="100" height="100" :src="item.url" />
      </div>
    </van-cell-group>
    <div class="goindex">
      <van-button
        round
        type="info"
        block
        color="linear-gradient(270deg, #FF8F43 0%, #F67665 100%)"
        @click="goindexhandle"
        >返回首页</van-button
      >
    </div>
    <div class="fullimg" v-show="fullimgshow" @click="fullimghandle">
      <img :src="fullimgurl" />
    </div>
  </div>
</template>

<script>
import { aiLoad } from '../../../utils/api'
export default {
  name: "AIReportDetail",
  data() {
    return {
      // typevalue: "垃圾溢满",
      // currentDate: "2021-04-23 13:24:45",
      // findkind: "人工上报",
      // address: "大吉路01号",
      // gridvalue: "0702网格",
      // pic: [
      //   "https://img01.yzcdn.cn/vant/cat.jpeg",
      //   "https://img01.yzcdn.cn/vant/cat.jpeg",
      // ],

      pic2: ["https://img01.yzcdn.cn/vant/cat.jpeg"],
      fullimgshow: false,
      fullimgurl: "",
      state:'',
      lists:{}
    };
  },
  mounted() {
    let that = this;
    if(that.$route.params.detail){
      aiLoad({id:that.$route.params.detail}).then(res=>{
        if(res.code === 200){
          that.lists = res.data;
          that.lists.eventType = that.lists.eventType == '0'?'建筑垃圾偷倒':(that.lists.eventType == '1'?'小包垃圾丢弃':'垃圾溢满');
          that.lists.ownerGrid = that.lists.ownerGrid || '--';
          that.state =  that.lists.eventStatus == '0'?'事件待处理':(that.lists.eventStatus == '1'?'事件到人':that.lists.eventStatus == '2'?'事件到人待结案':'事件结案');
          that.lists.imageUrl = that.lists.imageUrl.split(';');
          that.lists.sceneImageUrls = eval("(" +  that.lists.sceneImageUrls  + ")" );
        }else{
          Toast.fail(res.message)
        }
      })
      // that.lists = that.$route.params.detail;
      // that.lists.ownerGrid = that.lists.ownerGrid || '--';
      // that.state =  that.lists.eventStatus == '0'?'事件待处理':(that.lists.eventStatus == '1'?'事件到人':that.lists.eventStatus == '2'?'事件到人待结案':'事件结案');
      // that.lists.sceneImageUrls = eval("(" +  that.lists.sceneImageUrls  + ")" );
    }
  },
  methods: {
    // onClickLeft() {
    //   this.$router.push({ path: "/eventDiscoveryMain/manualReportDone" });
    // },
    typeSelect(value) {
      this.typevalue = value.name;
      this.typeshow = false;
    },
    gridSelect(value) {
      this.gridvalue = value.name;
      this.gridshow = false;
    },
    timeConfirm(date) {
      this.currentDate = `${date.getFullYear()}-${
        date.getMonth() + 1
      }-${date.getDate()}`;
      this.timeshow = false;
    },

    goindexhandle() {
      this.$router.push({ path: "/" });
    },
    vimghandle(item) {
      this.fullimgshow = true;
      this.fullimgurl = item;
    },
    fullimghandle() {
      this.fullimgshow = false;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  width: 100%;
  height: 35px;
  line-height: 35px;
  background: #daf4f1;
  color: #04bfac;
  font-weight: bold;
  text-align: center;
  margin-bottom: 5px;
  margin-top: 46px;
}
#gdmap {
  width: 100%;
  height: 400px;
}
.uploadbox {
  padding: 10px 20px;
  box-sizing: border-box;
}
.goindex {
  width: 90%;
  margin: 30px auto;
}
.vimg {
  padding: 3px 0px;
  margin-left: 10px;
  box-sizing: border-box;
  display: inline-block;
}
.fullimg {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1;
}
.fullimg img {
  width: 100%;
  object-fit: contain;
  height: 100%;
}
.desc {
  width: 100%;
  height: 35px;
  color: #ff8f43;
  line-height: 35px;
  font-weight: bold;
  font-size: 16px;
}
.desc i {
  width: 10px;
  height: 10px;
  background: #ff8f43;
  border-radius: 50%;
  float: left;
  margin: 11px 10px 0px 20px;
}
</style>
